<template>
	<div id="login" @keyup.enter="submit">
		<div class="bg"></div>
		<div class="logo">
			<img src="static/img/logo.png" >
			<span>保驾犬后台管理系统</span>
		</div>
		<img class="login-text" src="static/img/login_text.png" alt="">
		<Form class="content" ref="loginForm" :model="form" :rules="rules">
			<h2>登录您的账户</h2>
			<FormItem prop="username" :error="loginError.username">
				<div class="input-item">
					<i class="fa fa-user" ></i>
					<input v-model="form.username" placeholder="用户名" @input="clearUsernameError"></input>
				</div>
			</FormItem>
			<FormItem prop="password" :error="loginError.password">
				<div class="input-item">
					<i class="fa fa-lock" ></i>
					<input v-model="form.password" type="password" placeholder="密码" @input="clearPasswordError"></input>
				</div>
			</FormItem>
			<div class="jzpwd">
				<Checkbox v-model="isJZpwd" size="large">记住密码</Checkbox>
			</div>
			<div class="btns">
				<Button type="primary" size="large" :loading="isLoading" @click="submit" long>登录</Button>
			</div>
		</Form>
	</div>
</template>

<style lang="less" src="@/assets/styles/login.less"></style>
<script>
	import {mapActions,mapState} from 'vuex'
	import storage from '@/util/storage'

	export default {
		data() {
			return {
				isJZpwd:storage.get('isJZpwd')==='true',
				form:{
					username:storage.get('uaname'),
					password:storage.get('uapwd')
				},
				rules:{
					username:{required:true,message:"必须输入用户名",trigger: 'change'},
					password:{required:true,message:"必须输入密码",trigger: 'change'}
				}
			}
		},
		computed:{
			...mapState('base',['loginError','isLoading'])
		},
		methods:{
			...mapActions('base',['login']),
			submit(){
				this.$refs.loginForm.validate(async (v)=>{
					if(v){
						let returl = this.$route.params.returl;
						this.login({...this.form,isJZpwd:this.isJZpwd,returl});
					}
				});
			},
			clearUsernameError(){
				this.loginError.username = '';
			},
			clearPasswordError(){
				this.loginError.password = '';
			}
		}
	}
</script>
